.card-item {
  width: 690px;
  height: 280px;
  margin-top: 20px;
  background: url(../../../../assets/images/user/oldcard-background.png) center no-repeat;
  background-size: cover;
  padding: 34px 55px 0 59px;
  box-sizing: border-box;
  .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .top-left {
      display: flex;
      .shop-img {
        width: 94px;
        height: 94px;
        background: #ffffff;
        border-radius: 50%;
      }
      .card-info {
        margin-left: 22px;
        display: flex;
        flex-direction: column;
        .title {
          font-size: 36px;
          font-family: PingFangSC;
          font-weight: bold;
          color: #ffffff;
          line-height: 50px;
        }
        .user-name {
          font-size: 24px;
          font-family: PingFangSC;
          font-weight: 400;
          color: #ffffff;
          line-height: 50px;
          opacity: 0.8;
          margin-top: 14px;
        }
      }
    }

    .card-type {
      font-size: 28px;
      font-family: PingFangSC;
      font-weight: 400;
      color: #ffffff;
      line-height: 50px;
    }
  }
  .card-number {
    margin-top: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    Text {
      font-size: 40px;
      font-family: PingFangSC;
      font-weight: 500;
      color: #ffffff;
      line-height: 50px;
    }
    .eye-icon {
      width: 30px;
      height: 20px;
      background-size: contain;
      background-repeat: no-repeat;
      &.open {
        background-image: url(../../../../assets/images/user/open-eye.png);
      }
      &.close {
        background-image: url(../../../../assets/images/user/close-eye.png);
      }
    }
  }
}
